<template>
  <div class="bg">
    <div class="main">
      <van-image :src="bgUrl" width="100%" height="100vh"></van-image>
    </div>
    <div class="footer">
      <div class="radio">
        <!--        <van-radio-->
        <!--          v-model="isServiceAgreement"-->
        <!--          icon-size="20px"-->
        <!--          :name="true"-->
        <!--          style="margin-right: 10px;"-->
        <!--          :checked-color="activeColor"-->
        <!--        >-->
        <!--        </van-radio>-->

        <van-checkbox
          icon-size="20px"
          style="margin-right: 5px;"
          :name="true"
          v-model="isServiceAgreement"
          :checked-color="activeColor"
        ></van-checkbox>
        <div style="color:#fff;flex: 1">
          已阅读并同意
          <span @click="handleShowServeContent"
            >《哈哈生活圈用户服务隐私政策协议》</span
          >
        </div>
      </div>
      <div class="btn" @click="handleImSetIn">马上入驻</div>
    </div>
    <!--    云启点商户服务协议-->
    <van-popup v-model="isShowContent" position="bottom" round>
      <div class="content">
        <div class="header">
          <div>云启点商家用户协议&隐私政策协议</div>
          <div class="close">
            <van-icon name="cross" @click="isShowContent = false" />
          </div>
        </div>
        <div class="item">
          注册时将会填写以下信息：
        </div>
        <div class="item">
          姓名：用于注册付惠吧商户帐号的身份识别与商户资料审核。
        </div>
        <div class="item">
          身份证号：用于注册付惠吧商户帐号的身份识。
        </div>
        <div class="item">
          手机号：用于注册付惠吧商户帐号身份的身份识别与商户资料审核，以及接收短信验证码以及登录信息。
        </div>
        <div class="item">
          账号：用于注册付惠吧商户帐号后的交易结算。
        </div>
        <div class="item">
          地址：用于注册付惠吧商户帐号的身份识别与商户资料审核。
        </div>
        <div class="item">
          营业执照信息：用于注册付惠吧商户帐号的身份识别与商户资料审核。
        </div>
      </div>
    </van-popup>
    <van-popup v-model="isShowIndustry" round>
      <div class="industry-content">
        <div class="title">请选择商户主营行业:</div>
        <div class="select-box">
          <div class="select" @click="isShowIndustryList = true">
            <span>{{
              industryName ? industryName : "请选择商户主营行业"
            }}</span>
            <div class="arrow">
              <van-icon name="arrow-down" size="14px" />
            </div>
          </div>
        </div>
        <div class="tips">注：请老板认真选择商户主营行业</div>
        <div class="btns">
          <div class="btn cancel" @click="isShowIndustry = false">取消</div>
          <div class="btn confirm" @click="handleSetIn">
            确认并入驻
          </div>
        </div>
      </div>
    </van-popup>
    <!--    行业列表-->
    <van-popup
      v-model="isShowIndustryList"
      position="bottom"
      round
      @click-overlay="handleResetIndustry"
    >
      <div class="content">
        <div class="header">
          <div>请选择入驻行业</div>
          <div class="close">
            <van-icon name="cross" @click="handleResetIndustry" />
          </div>
        </div>
        <div class="list">
          <van-radio-group
            v-model="params.industryId"
            :activeColor="activeColor"
          >
            <van-cell-group>
              <van-cell
                :title="item.label"
                clickable
                v-for="item in industryList"
                :key="item.id"
                @click="params.industryId = item.id"
              >
                <template #right-icon>
                  <van-radio
                    :checked-color="activeColor"
                    :name="item.id"
                    :activeColor="activeColor"
                  />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
        <div>
          <van-button
            :color="activeColor"
            style="width: 100%"
            @click="handleConfirmIndustry"
            >确认</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getIndustry, setInPub } from "@/api/settleedit";

export default {
  name: "index",
  computed: {
    merchant() {
      return this.$route.query ? this.$route.query : {};
    }
  },
  created() {
    this.fetch();
    console.log("===", this.$route.query);
  },
  data() {
    return {
      bgUrl:
        "https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/pub_merchant_wxapp/apph5_pub_poster.png",
      isShowContent: false,
      isShowIndustry: false,
      isShowIndustryList: false,
      industryList: [],
      params: {
        merchantId: 0,
        industryId: 0
      },
      activeColor: "#ffb72f",
      industryName: "",
      isServiceAgreement: false,
      activeIcon: "passed",
      inactiveIcon: "checked"
    };
  },
  methods: {
    handleShowServeContent() {
      // this.isShowContent = true;
      this.$router.push({
        name: "settleAgreement"
      });
    },
    handleImSetIn() {
      if (!this.isServiceAgreement) {
        return this.$toast({
          message: "请同意协议",
          position: "bottom"
        });
      }
      this.isShowIndustry = true;
    },
    async fetch() {
      const res = await getIndustry();
      // const res = {
      //   code: 0,
      //   msg: "success",
      //   data: {
      //     "1": "茶餐饮",
      //     "2": "零售",
      //     "3": "休闲娱乐",
      //     "4": "综合商业体"
      //   },
      //   succeed: true
      // };
      const list = [];
      const data = res?.data;
      for (const listKey in data) {
        const obj = {
          label: data[listKey],
          id: Number(listKey)
        };
        list.push(obj);
      }
      console.log("行业列表/", list);
      this.industryList = list;
    },
    handleResetIndustry() {
      this.params.industryId = "";
      this.$nextTick(() => {
        this.handleConfirmIndustry();
      });
    },
    handleConfirmIndustry() {
      this.industryName = this.industryList.filter(
        v => v.id === this.params.industryId
      )[0]?.label;
      this.$nextTick(() => {
        this.isShowIndustryList = false;
      });
    },
    async handleSetIn() {
      this.params.merchantId = this.merchant.merchantId;
      console.log("入驻参数", this.params);
      if (!this.params.industryId) {
        this.$toast({
          message: "请选择商户主营行业",
          position: "bottom"
        });
        return;
      }
      const { code, msg } = await setInPub({
        ...this.params
      });
      if (code === 0 || code === 200) {
        this.$toast({
          message: "恭喜已入驻公域，去开启公域之旅吧",
          position: "bottom"
        });
        this.isShowIndustry = false;
        setTimeout(() => {
          this.$router.push({
            name: "settleInSuccess"
          });
        }, 1000);
        return;
      } else {
        this.$toast({
          message: msg,
          position: "bottom"
        });
      }
    }
  }
};
</script>

<style scoped>
.bg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  color: white;
}
.footer .radio {
  width: 100%;
  display: flex;
  /*align-items: center;*/
  /*justify-content: center;*/
  margin-bottom: 16px;
  font-size: 26px;
  padding: 0 20px;
  text-align: left;
}
.footer .btn {
  width: 100%;
  height: 98px;
  background-color: #ffb72f;
  font-size: 30px;
  color: white;
  line-height: 98px;
  text-align: center;
}
.content {
  font-size: 31px;
  font-weight: 400;
  color: #131313;
  margin: 33px 0 0 0;
}
.content .list {
  max-height: 50vh;
  overflow-y: scroll;
}
.content .item {
  margin: 31px 0;
}
.header {
  padding: 0 23px 23px 23px;
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 32px;
}
.content .close {
  position: absolute;
  top: 0;
  right: 26px;
}
.industry-content {
  //padding: 30px 53px 0  53px;
  width: 600px;
  padding-top: 30px;
  /*height: 388px;*/
  background: #ffffff;
  border-radius: 8px;
}
.industry-content .title {
  font-weight: bold;
  font-size: 26px;
  padding: 0 53px;
}
.select-box {
  padding: 0 53px;
}
.industry-content .select {
  margin-top: 40px;
  border: 1px solid #e3e3e3;
  padding: 15px;
  position: relative;
  border-radius: 8px;
  font-size: 28px;
  color: #888888;
}
.select .arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.industry-content .tips {
  margin-top: 23px;
  font-size: 26px;
  font-weight: 500;
  color: #3d3d3d;
  opacity: 0.8;
  padding: 0 53px;
}
.industry-content .btns {
  display: flex;
  align-items: center;
  border-top: 1px solid #e3e3e3;
  margin-top: 59px;
}
.industry-content .btns .btn {
  flex: 1;
  height: 90px;
  line-height: 90px;
  text-align: center;
  font-size: 26px;
}
.industry-content .btns .cancel {
  color: #ffb72f;
  border-right: 1px solid #e3e3e3;
}
.industry-content .btns .confirm {
  background-color: #ffb72f;
  color: white;
}
</style>
